<template>
  <div>
    <h2>添加航班</h2>
    <p>当前飞机 ID: {{ planeId }}</p>

    <el-form :model="flightForm" :rules="rules" ref="flightForm" label-width="100px" class="demo-ruleForm">
      <h4>设置航班信息</h4>
      <el-row gutter="20">
        <!-- 飞机编号 -->
        <el-col :span="12">
          <el-form-item label="飞机编号" prop="planeId">
            <el-input v-model="flightForm.planeId" :readonly="true"></el-input>
          </el-form-item>
        </el-col>

        <!-- 飞机名称 -->
        <el-col :span="12">
          <el-form-item label="飞机名称" prop="planeName">
            <el-input v-model="flightForm.planeName" :readonly="true"></el-input>
          </el-form-item>
        </el-col>

        <!-- 出发地 -->
        <el-col :span="12">
          <el-form-item label="出发地" prop="start">
            <el-select v-model="flightForm.start" placeholder="请选择出发地">
              <el-option label="上海" value="shanghai"></el-option>
              <el-option label="北京" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 目的地 -->
        <el-col :span="12">
          <el-form-item label="目的地" prop="destination">
            <el-select v-model="flightForm.destination" placeholder="请选择目的地">
              <el-option label="上海" value="shanghai"></el-option>
              <el-option label="北京" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 起飞时间 -->
      <el-form-item label="起飞时间" required>
        <el-row>
          <el-col :span="11">
            <el-form-item prop="startDate">
              <el-date-picker v-model="flightForm.startDate" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="startTime">
              <el-time-picker v-model="flightForm.startTime" placeholder="选择时间" style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>

      <!-- 到达时间 -->
      <el-form-item label="到达时间" required>
        <el-row>
          <el-col :span="11">
            <el-form-item prop="endDate">
              <el-date-picker v-model="flightForm.endDate" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="endTime">
              <el-time-picker v-model="flightForm.endTime" placeholder="选择时间" style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>

      <!-- 是否往返 -->
      <el-form-item label="是否往返" prop="goBack">
        <el-switch v-model="flightForm.goBack"></el-switch>
      </el-form-item>

      <!-- 座位类型信息 -->
      <!-- <h4>票价设置</h4>
      <div v-if="seatTypes.length">
        <h3>座位类型</h3>
        <ul>
          <li v-for="(seat, index) in seatTypes" :key="seat.seatId">
            {{ seat.seatType }}（总数：{{ seat.total }}）
          </li>
        </ul>
      </div>
      <div v-else>
        <p>暂无座位类型信息</p>
      </div> -->
      <!-- <div v-if="seatTypes && seatTypes.length">
      <h3>座位类型</h3>
      <ul>
        <li v-for="(seat, index) in seatTypes" :key="seat.seatId">
          {{ seat.seatType }}（总数：{{ seat.total }}）
        </li>
      </ul>
    </div>
    <div v-else>
      <p>暂无座位类型信息</p>
    </div> -->


    <div v-if="seatTypes.length">
  <h3>座位类型及票价设置</h3>
  <ul>
    <li v-for="(seat, index) in seatTypes" :key="seat.seatId">
      座位类型：{{ seat.seatType }}
      <el-input 
        v-model="seat.price" 
        placeholder="请输入票价"
        style="width: 200px; margin-left: 10px;">
      </el-input>
    </li>
  </ul>
</div>
<div v-else>
  <p>暂无座位类型信息</p>
</div>

    

      <el-form-item>
        <el-button type="primary" @click="submitForm('flightForm')">立即创建</el-button>
        <el-button @click="resetForm('flightForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script lang="ts">
import { getPlane, getSeatType } from "@/api/air_plane/index";  // 导入查询接口
import { tr } from "element-plus/es/locale";

export default {
  props: {
    planeId: {
      type: String,
      required: true
    },
  },
  
  data() {
    return {
      flightForm: {
        planeId: this.planeId,  // 将传入的 planeId 赋值给 flightForm.planeId
        planeName: '',
        start: '',
        destination: '',
        startDate: '',  // 起飞日期
        startTime: '',  // 起飞时间
        endDate: '',    // 到达日期
        endTime: '',    // 到达时间
        goBack: false,  //默认不往返
        seatTypes: [] // 存储座位类型数据
      },

      rules: {
        planeId: [
          { required: true, message: '请输入飞机编号', trigger: 'blur' }
        ],
        planeName: [
          { required: true, message: '请输入飞机名称', trigger: 'blur' }
        ],
        start: [
          { required: true, message: '请选择出发地', trigger: 'change' }
        ],
        destination: [
          { required: true, message: '请选择目的地', trigger: 'change' }
        ],
        startDate: [
          { required: true, message: '请选择起飞日期', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请选择起飞时间', trigger: 'change' }
        ],
        endDate: [
          { required: true, message: '请选择到达日期', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择到达时间', trigger: 'change' }
        ],
      },
    };
  },

  methods: {
  submitForm(formName: string) {
    this.$refs[formName].validate((valid: boolean) => {
      if (valid) {
        // 合并起飞日期和时间
        const startDateTime = new Date(`${this.flightForm.startDate} ${this.flightForm.startTime}`);
        const endDateTime = new Date(`${this.flightForm.endDate} ${this.flightForm.endTime}`);

        // 在这里进行表单提交操作，例如向后端发送数据
        const flightData = {
          ...this.flightForm,
          startDateTime, // 合并后的起飞时间
          endDateTime    // 合并后的到达时间
        };

        console.log("提交的数据: ", flightData);
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  },

  resetForm(formName: string) {
    this.$refs[formName].resetFields();
  },


  //请求后端座位类型数据
  async loadSeatTypes(planeId: number) {
    try {
      console.log("请求后端飞机信息和座位类型id="+planeId);

      const seatResponse = await getSeatType({planeId});  // 获取座位类型
      console.log('座位类型数据:', seatResponse.data);


      const planeResponse = await getPlane({planeId});  // 获取飞机信息
      console.log('飞机信息:', planeResponse.data);

      // 填充座位类型
      this.seatTypes = seatResponse.data || [];  // 确保座位类型为空数组

   

      // 填充飞机信息
      this.flightForm.planeName = planeResponse.data.planeName || '';
      //this.flightForm.start = planeResponse.data.start || '';
      //this.flightForm.destination = planeResponse.data.destination || '';
    } catch (error) {
      console.error('加载座位类型或飞机信息失败:', error);
    }
  }





},



mounted() {
  const planeId = this.$route.query.planeId;
  if (planeId) {
    // 根据 planeId 获取座位类型信息和飞机信息
    console.log('接收到的 planeId:', planeId);
    this.loadSeatTypes(planeId); // 根据 planeId 加载座位类型数据和飞机信息
  } else {
    console.error('未接收到 planeId');
  }
},
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>
